<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        ul {
            list-style: none;
        }

        li {
            padding: 10px;
        }

        li:nth-child(odd) {
            background: #16a085;
            color: aliceblue;
        }
    </style>
</head>

<body>
    <script>
        // let str = "baidu.com";
        // str += "aod";
        // console.log(str);
        function show() {
            return "baidu.com";
        }
        // 绝大多数的js 表达式都可以
        let hd = `www.${show()}`;
        console.log(hd);

        let lessons = [
            { title: "媒体查询响应式布局" },
            { title: "媒体查询响应式布局" },
            { title: "媒体查询响应式布局" }
        ];
        function templeate() {
            // return `
            //     <ul>${lessons.map(item =>
            //     "<li>" + item.title + "</li>"
            // ).join("")}
            // </ul>`;
            return `<ul>
                ${lessons.map(
                item => `<li>${item.title}</li>`
            ).join("")}
                </ul>`;
        }
        document.body.innerHTML = templeate();
    </script>
</body>

</html>